<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" class="container" style="height: 100%" ref="cesiumContainer"></div>
    <div class="position-label">{{ positionLabel }}</div>
  </div>
</template>

<script setup>
// 将cesium目录下的Build/Cesium4个目录拷贝到public，然后将widgets目录拷贝一份到src下
import { onMounted, ref } from 'vue'
import * as Cesium from 'cesium'
import initViewer from '@/cesium/initViewer'
import MousePosition from '@/cesium/MousePosition'
import CesiumNavigaion from 'cesium-navigation-es6'
import modifyMap from '@/cesium/modifyMap'
import modifyBuild from '@/cesium/modifyBuild'
import LightCone from '@/cesium/LightCone'
import RectFlyLight from '@/cesium/RectFlyLight'
import RoadLightLine from '@/cesium/RoadLightLine'
import RadarLight from '@/cesium/RadarLight'
import LightSpread from '@/cesium/LightSpread'
import LightWall from '@/cesium/LightWall'
import ParticleLight from '@/cesium/ParticleLight'

const cesiumContainer = ref(null)
const positionLabel = ref(null)

onMounted(() => {
  let el = cesiumContainer.value
  let viewer = initViewer(el)
  // 根据鼠标位置，生成经纬度值
  let mousePositon = new MousePosition(viewer, positionLabel)
  // 设置导航罗盘的配置
  let options = {
    // 启用罗盘
    enableCompass: true,
    // 是否启用缩放
    enableZoomControls: false,
    // 是否启用指南针外环
    enableCompassOuterRing: true,
    // 是否启用距离的图例
    enableDistanceLegend: true,
  }
  // 初始化导航罗盘
  let navigation = new CesiumNavigaion(viewer, options)
  modifyMap(viewer)
  modifyBuild(viewer)
  // 添加动态的光锥特效
  let lightCone = new LightCone(viewer)
  // 创建区域上升流光飞线
  let rectFlyLight = new RectFlyLight(viewer)
  // 创建道路飞线
  let roadLightLine = new RoadLightLine(viewer)
  // 创建雷达
  let radarLight = new RadarLight(viewer)
  // 6边形光波扩散特效
  let lightSpread = new LightSpread(viewer)
  // 创建光墙
  let lightWall = new LightWall(viewer)
  // particleLight,创建烟花粒子
  let particleLight = new ParticleLight(viewer, Cesium.Color.RED)
  let particleLight1 = new ParticleLight(viewer, Cesium.Color.AQUA)
  let particleLight2 = new ParticleLight(viewer, Cesium.Color.GREEN)
})
</script>

<style lang="stylus" scoped>
.position-label {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 250px;
  height: 50px;
  line-height: 50px;
  background-color: rgba(0, 0, 0, .5);
  color: #fff;
  font-size: 14px;
  text-align: center;
  z-index: 100;
}
</style>
